<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('finance.failedList')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable><!--内部订单号--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable><!--手机号码--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="withdrawAccount" label="">
                            <el-input v-model="form.withdrawAccount" :placeholder="$t('common.receiptAccount')" clearable><!--收款账号--></el-input>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="6">-->
                        <!--<el-form-item prop="thirdPartyOrderId" label="">-->
                            <!--<el-input v-model="form.thirdPartyOrderId" :placeholder="$t('common.paymentId')" clearable></el-input>&lt;!&ndash;放款单号&ndash;&gt;-->
                        <!--</el-form-item>-->
                    <!--</el-col>-->
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="applyTime" label="" clearable><!--申请时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.applyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="loanCmplTime" label=""><!--放款时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.loanCmplTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.loanStartTime')"
                                    :end-placeholder="$t('common.loanEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item prop="controlNumber" label="">
                            <el-input v-model="form.controlNumber" :placeholder="$t('common.loanSerialNumber')" clearable><!--放款序列号--></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item v-else prop="kana"> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" @selection-change="handleTableSelect" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column :label="$t('common.allChoose')" type="selection" width="50"></el-table-column>
                        <el-table-column :label="$t('common.operation')" width="250">
                            <template slot-scope="{ row }">
                                <el-button @click="editName(row)" type="text">{{ $t('common.editName') }}</el-button>
                                <el-button type="text" @click="showPass(row)" :disabled="row.modifyAcountStatus === 1">{{ $t('common.loan') }}</el-button>
                                <el-button type="text" @click="showRefuse(row)">{{ $t('common.refuse') }}</el-button>
                                <el-button type="text" @click="changeSubmit(row)" :disabled="row.modifyAcountStatus === 1">
                                    <span v-if="row.modifyAcountStatus === 1">{{ $t('common.changing') }}</span>
                                    <span v-else>{{ $t('operation.modify') }}</span>
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="UserId" prop="userId" width="120"></el-table-column>
                        <el-table-column :label="$t('common.loanTime')" prop="loanTime" width="180">
                            <template slot-scope="{ row }">{{ row.loanTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--放款时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.notProcessTime')" prop="processingHour" min-width="120">
                            <template slot-scope="{ row }">{{ row.processingHour }}<span v-if="row.processingHour">h</span></template><!--未处理时长-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanCount')" prop="loanTimes" width="120"></el-table-column><!--放款次数-->
                        <el-table-column :label="$t('common.reasonFailureLoan')" prop="remark" width="200">
                          <template slot-scope="scope">
                              <div class="edit_remark">
                                  <span v-if="!scope.row.remark || (scope.row.remark && scope.row.remark.length <= 25)">{{ scope.row.remark }}</span>
                                  <el-popover v-if="scope.row.remark && scope.row.remark.length > 25" trigger="hover" placement="top">
                                      <p>{{ scope.row.remark }}</p>
                                      <div slot="reference">
                                          <span v-if="scope.row.remark.length > 25">{{ scope.row.remark.substr(0, 25) }}...</span>
                                          <span v-else>{{ scope.row.remark }}</span>
                                      </div>
                                  </el-popover>
                              </div>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanChannel')" prop="channelCompany" min-width="180"><!--放款渠道-->
                            <template slot-scope="{ row }">{{ row.channelCompany | SwitchChannelCompany }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanType')" prop="withdrawChannel" min-width="180"><!--放款方式-->
                            <template slot-scope="{ row }">{{ row.withdrawChannel | SwitchLoanChannel }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.name')"  prop="userName" min-width="160"></el-table-column><!--姓名-->
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" width="150"></el-table-column><!--手机号码-->
                        <el-table-column :label="$t('common.innerOrderId')" prop="orderId" width="200"></el-table-column><!--内部订单号-->
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->

                        <el-table-column :label="$t('common.loanSerialNumber')" prop="controlNumber" width="200"></el-table-column><!--放款序列号-->
                        <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" width="120">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowingCycle')" prop="loanPeriod" width="120">
                            <template slot-scope="{ row }">{{ row.loanPeriod }}{{ $t('common.day') }}</template><!--借款周期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanAmount')" prop="loanAmount" width="120">
                            <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template><!--放款金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanFee')" prop="loanFee" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanFee | formatCurrency }}</template><!--放款手续费-->
                        </el-table-column>
                        <el-table-column :label="$t('common.actualLoanAmount')" prop="loanAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanAmount+row.loanFee | formatCurrency }}</template><!--实际出账金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.applyDate')" prop="applyTime" width="180">
                            <template slot-scope="{ row }">{{ row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--申请时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.receiptAccount')" prop="withdrawAccount" width="150"></el-table-column><!--收款账号-->
                        <el-table-column :label="$t('common.receiptAccountBank')" prop="withdrawAccountBank" min-width="150"></el-table-column><!--收款账号所属银行-->
                        <!--<el-table-column :label="$t('common.paymentId')" prop="thirdPartyOrderId" width="200"></el-table-column>&lt;!&ndash;“放款订单号”改为“支付ID”&ndash;&gt;-->
                        <el-table-column :label="$t('common.leadingActionType')" prop="loanType" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanType | SwitchLeadingActionType }}</template><!--放款动作类型-->
                        </el-table-column>
                    </el-table>
                    <div v-show="tableData.length" class="table_bottom_btns">
                        <el-button @click="batchPass" type="primary" :disabled="selectedIdList.ids.length === 0" size="small">{{ $t('common.batchLoan') }}</el-button>
                        <el-button @click="showBatchRefuse" type="primary" :disabled="selectedIdList.ids.length === 0" size="small">{{ $t('common.batchRefuse') }}</el-button>
                        <el-button @click="batchOfflineLoan" :disabled="selectedIdList.ids.length === 0" type="primary" size="small">{{ $t('common.offlineLoan') }}</el-button><!--线下放款-->
                    </div>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->
        <!--拒绝放款弹框start-->
        <el-dialog :title="$t('common.refuseReason')" :visible.sync="showRefuseDialog" width="460px">
            <el-form :form="refuseForm">
                <el-form-item :label="refuseForm.label">
                    <el-input type="textarea" v-model="refuseForm.reason" :placeholder="$t('common.refuseReason')" :rows="8" :maxlength="200"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="batchRefuse" v-if="showBatchRefuseButton">{{ $t('common.batchSubmit') }}</el-button>
                <el-button type="primary" @click="refuse" v-else>{{ $t('common.submit') }}</el-button>
                <el-button type="cancel" @click="showRefuseDialog = false">{{ $t('common.cancel') }}</el-button>
            </div>
        </el-dialog>
        <!--拒绝放款弹框end-->

        <!-- 修改姓名 -->
        <el-dialog :title="$t('common.editName')" :visible.sync="showEditName" width="460px" :close-on-click-modal="false">
            <el-form ref="nameForm" :model="nameForm" :rules="nameFormRules">
                <el-form-item label="Last Name" prop="lastName">
                    <el-input v-model.trim="nameForm.lastName" placeholder="Last Name" type="text" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="First Name" prop="firstName">
                    <el-input v-model.trim="nameForm.firstName" placeholder="First Name" type="text" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="Middle Name" prop="middleName">
                    <el-input v-model.trim="nameForm.middleName" placeholder="Middle Name" type="text" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item>
                    <div v-show="nameForm.showErrorMsg" class="error_tips color_red">{{ $t('common.emptyNameTips') }}</div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showEditName=false" type="default">{{ $t('common.cancel') }}</el-button>
                <el-button @click="handleEditName" type="primary">{{ $t('common.modify') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script src="./main.js"></script>
<style lang="scss">
    [data-page=finance-loan-failedList] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
    }
</style>
